<template>
  <div>
    <el-table :data="tableList" v-loading="loading" size="mini" stripe style="width: 100%;">
      <el-table-column label="名称" width="200">
        <template slot-scope="scope">{{scope.row.username}}</template>
      </el-table-column>

      <el-table-column label="活动说明" align="center">
        <template slot-scope="scope">
          <el-tag size="mini" type="success">{{scope.row.nickname}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="活动状态" width="100" align="center">
        <template slot-scope="scope"></template>
      </el-table-column>

      <el-table-column label="开始时间" width="200">
        <template slot-scope="scope">{{scope.row.applyEnd | date_format}}</template>
      </el-table-column>

      <el-table-column label="结束时间" width="200">
        <template slot-scope="scope">{{scope.row.applyStart | date_format}}</template>
      </el-table-column>

      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <span>
            <el-button @click="handleGetUserInfo(scope.row)">修改</el-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "g2ExampleTableQuery",

  data() {
    return {
      downloadColumns: [
        { label: "卡密", prop: "key" },
        { label: "面值", prop: "value" },
        { label: "状态", prop: "type" },
        { label: "管理员", prop: "admin" },
        { label: "管理员备注", prop: "adminNote" },
        { label: "创建时间", prop: "dateTimeCreat" },
        { label: "使用状态", prop: "used" },
        { label: "使用时间", prop: "dateTimeUse" }
      ]
    };
  },
  computed: {
    ...mapState("g2/user", {
      loading: "isLoading",
      tableList: "list"
    })
  },
  methods: {
    handleSwitchChange(val, index) {
      const oldValue = this.currentTableData[index];
      this.$set(this.currentTableData, index, {
        ...oldValue,
        type: val
      });
      // 注意 这里并没有把修改后的数据传递出去 如果需要的话请自行修改
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    downloadDataTranslate(data) {
      return data.map(row => ({
        ...row,
        type: row.type ? "禁用" : "正常",
        used: row.used ? "已使用" : "未使用"
      }));
    },
    handleGetUserInfo(user) {
      this.$store.dispatch('g2/user/getUserBasicInfo',user.id)

    }
  }
};
</script>

<style scoped lang="scss">
</style>
